<!--
 * @Author: daidai
 * @Date: 2022-03-04 09:23:59
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2022-05-07 11:05:02
 * @FilePath: \web-pc\src\pages\big-screen\view\indexs\index.vue
-->
<template>
  <ScaleScreen
      :width="1920"
      :height="1080"
      class="down-scale-wrap"
      :selfAdaption="$store.state.setting.isScale">
    <div class="down-bg">
      <div class="down-host-body">
        <!-- 头部 s -->
        <div class="down-d-flex down-jc-center down-title_wrap">
          <div class="down-zuojuxing"></div>
          <div class="down-youjuxing"></div>
          <div class="down-guang"></div>
          <div class="down-d-flex down-jc-center">
            <div class="down-title">
              <span class="down-title-text"> “天-地-孔”一体化监测平台</span>
            </div>
          </div>
        </div>
        <div class="table-container">

          <table class="scroll-table">
            <thead class="sticky-header"  >
            <tr>
              <th  style="width: 30%;color: red">预警消息列表</th>
              <th  style="width: 70%;">预警信息</th>
            </tr>
            </thead>
            <tbody>
              <tr v-for="alert in alertDate" :key="alert.id">
              <td>{{ alert.alert_message_list }}</td>
              <td>{{ alert.alert_info }}</td>
              </tr>
            </tbody>
          </table>

        </div>
        <button @click="goBack" class="return-btn">返回</button>
      </div>
    </div>

  </ScaleScreen>

</template>

<script>
import axios from "axios";
export default {
  data(){
    return{
    alertMessages: [],
    customIndex: [],
    alertDate:[]
    }
  },
  created() {
    this.getAlertDate();
  },
  methods: {
    goBack() {
      this.$router.go(-1);
    },
    async getAlertDate(){
      try {
        const response = await axios.get("http://localhost:8000/alert");
        this.alertDate = response;
        console.log("response的内容为",response)

      }catch (e){
        console.error("Error fetching data:", e);
        this.alertDate = []; // 如果请求失败，清空数据
      }
    }
  }
};
</script>

<style lang="scss" scoped>
@import "./down-home.scss";
// 内容
.return-btn {
  position: fixed;
  top: 20px;
  right: 110px;
  width: 100px;
  height: 40px;
  font-size: 22px; /* 修改字号 */
  background-color: rgba(0, 184, 255, 0.18); /* 修改底色 */
  color: rgba(255, 255, 255, 0.97); /* 修改字体颜色 */

  border-radius: 4px; /* 圆角 */
}
.table-container {
  border: 1px solid blue;
  width: 100%;
  height: 90%; /* 设置容器高度，超出部分会出现滚动条 */
  overflow-y: auto; /* 使用滚动条 */
  overflow-x: hidden;
  position: relative;

}

.scroll-table {
  width: 100%;
  border-collapse: collapse; /* 使表格边框连接 */
}

.scroll-table th,
.scroll-table td {
  border: 2px solid blue; /* 添加表格边框 */
  padding: 8px; /* 添加内边距 */
}
.sticky-header {
  position: sticky;
  top: 0;
  height: 90%;
  background-color: black;
  border-bottom: 1px solid blue; /* 底部边框 */
  box-shadow: 0 0 0 1px blue inset; /* 内部边框，模拟外部边框效果 */
}
.down-contents {
  display: flex;
  height: 100%;
  width: 95%;
  .down-contetn_left{
    flex: 2;
  }
  .down-contetn_center {
    flex: 7;
  }

  //左右两侧 三个块
  //.contetn_lr-item {
  //  height: 310px;
  //}

  //.contetn_center_top {
  //  width: 100%;
  //}

  // 中间
  //.contetn_center {
  //  display: flex;
  //  flex-direction: column;
  //  justify-content: space-around;
  //}

  //.contetn_center-bottom {
  //  height: 1500px;
  //}

  ////左边 右边 结构一样
  //.contetn_left,
  //.contetn_right {
  //  display: flex;
  //  flex-direction: column;
  //  justify-content: space-around;
  //  position: relative;
  //
  //
  //}
}
.button-list {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
}

.button {
  margin-bottom: 10px;
  padding: 10px 20px;
  font-size: 16px;
}

@keyframes rotating {
  0% {
    -webkit-transform: rotate(0) scale(1);
    transform: rotate(0) scale(1);
  }
  50% {
    -webkit-transform: rotate(180deg) scale(1.1);
    transform: rotate(180deg) scale(1.1);
  }
  100% {
    -webkit-transform: rotate(360deg) scale(1);
    transform: rotate(360deg) scale(1);
  }
}
</style>
